<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
	<link rel="stylesheet" type="text/css" href="css/header.css"/>
    
</head>
<body>
	<header class="mui-bar mui-bar-nav title">
		<h1 class="mui-title title-color" id="feichat_title"><b>飞信</b></h1>
	</header>
	
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item mui-active" tabindex="0">
			<span class="mui-icon mui-icon-chatbubble"></span>
			<span class="mui-tab-label">消息</span>
		</a>
		<a class="mui-tab-item" tabindex="1">
			<span class="mui-icon mui-icon-contact"></span>
			<span class="mui-tab-label">通讯录</span>
		</a>
		<a class="mui-tab-item" tabindex="2">
			<span class="mui-icon mui-icon-paperplane"></span>
			<span class="mui-tab-label">发现</span>
		</a>
		<a class="mui-tab-item" tabindex="3">
			<span class="mui-icon mui-icon-person"></span>
			<span class="mui-tab-label">我</span>
		</a>
	</nav>
	
	<script type="text/javascript">
		mui.init();
			
		var feichatArray=[
			{
				pageId:"chat.html",
				pageUrl:"chat.html",
			},
			{
				pageId:"contact.html",
				pageUrl:"contact.html",
			},
			{
				pageId:"discover.html",
				pageUrl:"discover.html",
			},
			{
				pageId:"my.html",
				pageUrl:"my.html",
			}
		];
		
		var feichatStyle={
			top:"44px",
			bottom:"50px"
		}
		
		mui.plusReady(function () {
			
			setTimeout(function(){
				plus.webview.currentWebview().opener().close("none");
			},100);
			
			plus.navigator.setStatusBarStyle("dark");
			plus.navigator.setStatusBarBackground("#DDDDDD");
			
			//禁止返回到登录注册页面
			mui.back=function(){
				var main= plus.android.runtimeMainActivity();
				main.moveTaskToBack(false);
			}
			
			// 对网络连接进行事件监听
			netChangeSwitch();
			
			//获取当前的webview对象
		    var indexWebview=plus.webview.currentWebview();
			
			//向当前的主页webview追加子页的4张webview对象
			for(var i=0;i<feichatArray.length;i++){
				var feichatPage=plus.webview.create(feichatArray[i].pageUrl,feichatArray[i].pageId,feichatStyle);
				//隐藏webview窗口
				feichatPage.hide();
				//追加每一个子页面到当前主页面
				indexWebview.append(feichatPage);
				
			}
			plus.webview.show(feichatArray[0].pageId);
			
			//批量绑定tab事件,展示不同的页面
			mui('.mui-bar-tab').on('tap','a',function(){
				var tabindex=this.getAttribute("tabindex");
				
				plus.webview.show(feichatArray[tabindex].pageId,"fade-in",200);
				
				//隐藏其他不需要的页面
				for(var i=0;i<feichatArray.length;i++){
					if(i!=tabindex){
						plus.webview.hide(feichatArray[i].pageId,"fade-out",200);
					}
				}
			});
			
			// 延时加载
			setTimeout("initData()", "1000");
			
			// 添加自定义事件，刷新
			window.addEventListener("refresh", function(){
				location.reload();
			});
		});
		
		// 监听网络状态更改
		function netChangeSwitch(){
			document.addEventListener("netchange", function(){
				// 网络状态获取和判断
				var connectionStatus = plus.networkinfo.getCurrentType();
				if (connectionStatus != 0 && connectionStatus != 1) {
					// 重新打开网络连接
					var feichat_title = document.getElementById("feichat_title");
					feichat_title.innerHTML = "<b>飞信</b>";
				} else {
					// 关闭网络连接
					var feichat_title = document.getElementById("feichat_title");
					feichat_title.innerHTML = "<b>飞信(未连接)</b>";
				}
			});
		}
		
		// 预加载
		function initData() {
			var imooc_chatlist = plus.webview.getWebviewById("chat.html");
			mui.fire(imooc_chatlist, "refresh");
			
			var imooc_me = plus.webview.getWebviewById("my.html");
			mui.fire(imooc_me, "refresh");
		}
	</script>
</body>
</html>